<template>
  <el-row>
    
   <!--  搜索操作区 -->
    <el-row class="pb10 little-header">
          <el-col :md='24' :lg='16'  align='left' >
                  <el-col  :xs='23'  :sm='9'  :md='9' :lg='9'>
                      	<el-date-picker 
            				      v-model="search.choosevalue"
            				      type="datetimerange"
            				      :picker-options="pickerOptions"
            				      range-separator="至"
            				      start-placeholder="开始日期"
            				      end-placeholder="结束日期"
            				      align="left">
            				    </el-date-picker>
                  </el-col>
                  <el-col  :xs='12' :sm='6' :md='6' :lg='6'  class='ml10'>
                        <el-input  placeholder='请输入操作者/内容' v-model='search.name'  @focus='focusinput($event)'  @blur = 'blurinput($event)'></el-input>
                  </el-col>
                  <el-col  :xs='2' :sm='2' :md='2' :lg='2'  class='ml10'>
                        <el-button icon="el-icon-search" type='primary' @click='pageInit()'>搜索</el-button>
                  </el-col>
                
          </el-col>
          <el-col :lg='{span:4,offset:3}'>  
                <div align="right">
                        <!-- <el-button  class='export-icon'               size="small" round   @click="handleExport()"><i class='fa fa-share pr5'></i>导出</el-button> -->
                </div>
          </el-col>
    </el-row>
    <!-- table -->
    <el-table border  :data="tableList" style="width: 100%" >
          <el-table-column prop="type"        label="类型"    align="center">
                <template slot-scope="scope">
                      {{scope.row.type | loginJournal_Type}}
                </template>
          </el-table-column>
          <el-table-column prop="name"        label="操作者"    align="center"  fixed></el-table-column>
          <el-table-column prop="loginName"   label="登录名"    align="center"></el-table-column>
          <el-table-column prop="operation"   label="操作内容"  align="center"></el-table-column>
          <!-- <el-table-column                    label="详情"     align="center"  >
              <template v-slot="list">
                          <i class='icon icon-detail' @click="showdetail(list.$index, list.row)"></i>
                  </template>
                
          </el-table-column> -->
          <el-table-column prop="createTime"   label="操作时间"     align="center">
                  <template slot-scope="scope">
                      {{scope.row.createTime | formatDate}}
                  </template>
          </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination class='mt28'
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="1"
            :page-sizes="[10, 20]"
            :page-size="10"
            :pager-count="5"
            layout="total, sizes, prev, pager, next, jumper"
            :total="Total">
    </el-pagination>
    <Detail ref="formEdit" v-on:save-finished="pageInit()"></Detail>
  </el-row>
  
</template>

<script>

//接口
import { listOp,getDetailById  } from '@/api/journal/login'

//组件
import Detail from '@/components/journal/index'
export default {
  name: 'op_journal',
  data () {
    return {
      
      /*static*/
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      /*active*/
      
      //查询 /初始化
      search: {
        limit: 10,//每页查询条数
        currentPage:1,//当前页数
        choosevalue:'',
        type:'3',
        name:this.Global.ie_nine == true ? '请输入操作者/内容':'',/*placeholder 兼容ie9 △*/
      },
      search_place_str:'请输入操作者/内容',//placeholder输入内容 placeholder 兼容ie9 △
      Total:null,//表格总页数
      tableList:[],//角色列表data

    }
  },
  created() {
    this.pageInit()
  },
  methods:{
    // 初始化表格数据
    pageInit(){
      
      let that =this
      
      /*placeholder 兼容ie9 △*/
      if(this.search.name == this.search_place_str){
          this.search.name = ''
      }
      listOp(this.search).then(response => {
          this.Total = response.data.totalRs
          this.tableList = response.data.dataList
          /*placeholder 兼容ie9 △*/
          if(this.search.name == ''){
              this.search.name = this.Global.ie_nine == true ? this.search_place_str:''
          }
      })
      .catch(error => {
          that.outputError(error)
      })  
        
    },
    /*查看
     *@method 方法名
     *@for 所属类名
     *@param{index, row} 某一行id 某一行
     *@return {} 
    */
     showdetail(index, row){
          getDetailById(row.code).then(res=>{
              let detailData=res.data
              if(detailData.data.exception || detailData.data.params){
                   this.$refs.formEdit.$emit('openDialog', detailData.data)
              }
          })
    },
    //导出
    handleExport(){

    },
    
     /*placeholder 兼容ie9 focus-blur △*/
    focusinput(e){
        if(this.Global.ie_nine == true){
            this.search.name = this.search.name == this.search_place_str ? '':this.search.name
        }
    },
    blurinput(e){
        if(this.Global.ie_nine == true){
            let val = e.srcElement.value//ie9下只能用这个值
            this.search.name = val == '' ? this.search_place_str:val
        }
    },
    /*每页显示条数变化 */
    handleSizeChange(val) {
      this.search.limit = val;
      this.pageInit()
    },
    /*页数变化 */
    handleCurrentChange(val) {
      this.search.currentPage = val
      this.pageInit()
    },
  },
  components:{
      Detail
  }
}
</script>


<style scoped>
.icon{width: 32px;height: 32px;padding-right: 5px;}
.icon-detail{background: url('../../assets/images/img/option/icon-detail.png') no-repeat;cursor: pointer;}

  .el-date-editor--datetimerange.el-input, .el-date-editor--datetimerange.el-input__inner{width: 100%;}
</style>
